<template>
  <div class="information">
    <!-- 搜索 -->
    <div class="search">
      <el-form
        :model="searchForm"
        ref="formData"
        :rules="rules"
        label-width="80px"
        inline
      >
        <el-form-item label="帖子标题" prop="title">
          <el-input
            class="search-input"
            v-model="searchForm.title"
            autofocus="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据列表 -->
    <div class="data-list" v-loading="loading">
      <div v-if="tableData.length > 0">
        <div
          class="item"
          v-for="item in tableData"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <div class="title">{{ item.title }}</div>
          <div class="tail">
            <div class="time">{{ formatDate(item.createTime) }}</div>
            <div class="views">
              <i class="el-icon-view"></i>{{ item.visitorNum }}
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          v-show="tableData.length > 0"
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          :page-count="7"
          style="text-align: right; margin-top: 24px"
        >
        </el-pagination>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import { addVisit, getInfoList } from "@/api/user/info";

export default {
  name: "InfoView",
  data() {
    return {
      searchForm: {
        title: "",
      },
      rules: {
        title: [{ required: true, message: "请输入帖子标题", trigger: "blur" }],
      },
      page: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      tableData: [],
      Loading: false,
    };
  },
  created() {
    this.getInfoList();
  },
  methods: {
    // 搜索
    search() {
      this.$refs.formData.validate((v) => {
        if (v) {
          this.page = 1;
          this.currentPage = 1;
          this.getInfoList();
        }
      });
    },
    // 重置
    reset() {
      this.$refs.formData.resetFields();
      this.page = 1;
      this.currentPage = 1;
      this.getInfoList();
    },
    // 获取帖子列表
    async getInfoList() {
      try {
        this.loading = true;
        const res = await getInfoList({
          page: this.page,
          pageSize: this.pageSize,
          ...this.searchForm,
        });
        this.tableData = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取列表失败");
      } finally {
        this.loading = false;
      }
    },
    // 跳转详情页
    async toDetail(id) {
      const res = await addVisit({ id });
      this.$router.push(`/infoDetail/${id}`);
      // 增加访问量
    },
    // 分页
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getInfoList();
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
};
</script>

<style lang="less" scoped>
.information {
  .search {
    margin: 100px 0 10px;
    .search-input {
      width: 600px;
    }
  }
  .data-list {
    padding: 0 100px 10px;
    text-align: left;
    .item {
      margin-bottom: 20px;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 76px;
      line-height: 76px;
      border-radius: 10px;
      cursor: pointer;
      background: linear-gradient(90deg, #fbf2f8 0%, #e9e7f9 51%, #ddeaf8 100%);
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
      &:hover {
        transform: scale(1.04);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.36);
      }
      &:active {
        transform: scale(1.02);
      }
      .title {
        font-size: 18px;
      }
      .tail {
        display: flex;
        color: #999;
        font-size: 15px;
        .views {
          margin-left: 10px;
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>